<template>
	<view class="address-page">
		<!-- 内容区域 -->
		<view class="address-container">
			<!-- 地址列表 -->
			<view class="address-card" v-for="address in addresses" :key="address.id" @click="selectAddress(address)">
				<view class="address-content">
					<view class="address-default-tag" v-if="address.isDefault">默认</view>
					<view class="address-name-phone">
						{{ address.name }} {{ address.phone | phoneFilter }}
					</view>
					<view class="address-detail">
						{{ address.region }}{{ address.detail }}
					</view>
					<view class="address-actions">
						<view class="address-action" @click.stop="editAddress(address)">
							<uni-icons type="compose" size="16" color="#ff5a5f" />
							<text>编辑</text>
						</view>
						<view class="address-action" @click.stop="deleteAddress(address.id)">
							<uni-icons type="trash" size="16" color="#666" />
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="address-empty" v-if="addresses.length === 0">
				<uni-icons type="location" size="50" color="#ddd" />
				<text class="empty-text">您还没有添加收货地址</text>
			</view>

			<!-- 添加地址按钮 -->
			<button class="address-add-btn" @click="addAddress">
				<uni-icons type="plus" size="16" color="#fff" />
				<text>新增收货地址</text>
			</button>
		</view>

		<!-- 地址表单弹窗 -->
		<uni-popup ref="addressPopup" type="bottom">
			<view class="address-popup">
				<view class="address-form">
					<view class="form-header">
						<text class="form-title">收货地址</text>
						<uni-icons type="close" size="20" color="#999" @click="cancelForm" class="close-icon" />
					</view>

					<view class="form-group">
						<view class="form-row">
							<view class="form-col">
								<view class="form-label">收货人</view>
								<input v-model="form.name" type="text" class="form-input" placeholder="请输入姓名"
									placeholder-class="placeholder" :maxlength="20"
									@input="form.name = $event.detail.value">
							</view>
							<view class="form-col">
								<view class="form-label">手机号码</view>
								<input v-model="form.phone" type="number" class="form-input" placeholder="请输入手机号"
									placeholder-class="placeholder" maxlength="11" @input="handlePhoneInput">
							</view>
						</view>
					</view>

					<view class="form-group">
						<view class="form-label">所在地区</view>
						<picker mode="region" @change="onRegionChange" :value="regionIndex">
							<view class="form-input region-input">
								<text class="region-text">{{ form.region || '请选择地区' }}</text>
								<uni-icons type="forward" size="16" color="#bbb" />
							</view>
						</picker>
					</view>

					<view class="form-group">
						<view class="form-label">详细地址</view>
						<input v-model="form.detail" type="text" class="form-input" placeholder="请输入详细地址，如街道、门牌号等"
							placeholder-class="placeholder" :maxlength="100" @input="form.detail = $event.detail.value">
					</view>

					<view class="form-group">
						<view class="form-switch">
							<view class="form-switch-label">设为默认地址</view>
							<switch :checked="form.isDefault" @change="form.isDefault = $event.detail.value"
								color="var(--primary-color)" />
						</view>
					</view>

					<view class="form-actions">
						<button class="form-btn form-btn-cancel" @click="cancelForm">
							<text class="btn-text">取消</text>
						</button>
						<button class="form-btn form-btn-save" @click="saveAddress">
							<text class="btn-text">保存</text>
						</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue';

	// 地址数据
	const addresses = ref([{
			id: 1,
			name: '张小明',
			phone: '13800136666',
			region: '上海市浦东新区张江高科技园区',
			detail: '博云路2号名创优品大厦5楼',
			tag: '公司',
			isDefault: true
		},
		{
			id: 2,
			name: '李华',
			phone: '15900188888',
			region: '北京市朝阳区',
			detail: '建国路88号现代城5号楼2单元801',
			tag: '家',
			isDefault: false
		}
	]);

	// 表单数据
	const form = ref({
		id: null,
		name: '',
		phone: '',
		region: '',
		detail: '',
		tag: '',
		isDefault: false
	});

	// 地区选择器
	const regionData = ref([
		// 省份数据
		[{
			value: '110000',
			text: '北京市'
		}, {
			value: '310000',
			text: '上海市'
		}, {
			value: '440000',
			text: '广东省'
		}, {
			value: '320000',
			text: '江苏省'
		}, {
			value: '330000',
			text: '浙江省'
		}],
		// 城市数据
		[{
			value: '110100',
			text: '北京市'
		}, {
			value: '310100',
			text: '上海市'
		}, {
			value: '440100',
			text: '广州市'
		}, {
			value: '440300',
			text: '深圳市'
		}, {
			value: '320100',
			text: '南京市'
		}, {
			value: '330100',
			text: '杭州市'
		}],
		// 区县数据
		[{
			value: '110101',
			text: '东城区'
		}, {
			value: '110102',
			text: '西城区'
		}, {
			value: '310104',
			text: '徐汇区'
		}, {
			value: '440106',
			text: '天河区'
		}, {
			value: '440305',
			text: '南山区'
		}, {
			value: '320102',
			text: '玄武区'
		}, {
			value: '330102',
			text: '上城区'
		}]
	]);

	// 当前选择的索引
	const regionIndex = ref([0, 0, 0]);

	// 弹窗引用
	const addressPopup = ref(null);

	// 手机号过滤
	const phoneFilter = (phone) => {
		return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
	};

	// 添加地址
	const addAddress = () => {
		form.value = {
			id: null,
			name: '',
			phone: '',
			region: '',
			detail: '',
			tag: '',
			isDefault: false
		};
		addressPopup.value.open();
	};

	// 删除地址
	const deleteAddress = (id) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除该地址吗？',
			success: (res) => {
				if (res.confirm) {
					addresses.value = addresses.value.filter(item => item.id !== id);
				}
			}
		});
	};

	// 保存地址
	// 修改保存地址逻辑
	const saveAddress = () => {
		if (!validateForm()) return;

		if (form.value.isDefault) {
			addresses.value.forEach(item => item.isDefault = false);
		}

		const newAddress = {
			...form.value
		};

		if (newAddress.id) {
			// 更新地址
			const index = addresses.value.findIndex(item => item.id === newAddress.id);
			if (index !== -1) {
				addresses.value.splice(index, 1, newAddress);
			}
		} else {
			// 新增地址
			newAddress.id = Date.now();
			addresses.value.unshift(newAddress);
		}

		addressPopup.value.close();
	};

	// 添加取消表单方法
	const cancelForm = () => {
		addressPopup.value.close();
	};

	// 添加手机号输入处理方法
	const handlePhoneInput = (e) => {
		// 过滤非数字字符
		let value = e.detail.value.replace(/\D/g, '');
		// 限制11位长度
		value = value.slice(0, 11);
		form.value.phone = value;
	};

	// 添加表单验证方法
	const validateForm = () => {
		if (!form.value.name?.trim()) {
			uni.showToast({
				title: '请输入收货人姓名',
				icon: 'none'
			});
			return false;
		}
		if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号码',
				icon: 'none'
			});
			return false;
		}
		if (!form.value.region?.trim()) {
			uni.showToast({
				title: '请选择所在地区',
				icon: 'none'
			});
			return false;
		}
		if (!form.value.detail?.trim()) {
			uni.showToast({
				title: '请输入详细地址',
				icon: 'none'
			});
			return false;
		}
		return true;
	};

	// 修改编辑地址方法
	const editAddress = (address) => {
		form.value = JSON.parse(JSON.stringify(address));
		addressPopup.value.open();
	};

	// 地区选择处理方法
	const onRegionChange = (e) => {
		const indexes = e.detail.value;
		regionIndex.value = indexes;

		const province = regionData.value[0][indexes[0]];
		const city = regionData.value[1][indexes[1]];
		const district = regionData.value[2][indexes[2]];

		form.value.region = `${province.text}${city.text}${district.text}`;
	};
</script>

<style lang="scss" scoped>
	.address-page {
		padding-bottom: 80px;

		.region-picker {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			z-index: 999;
			padding: 20px;
			box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		}

		.address-container {
			padding: 15px;
		}

		.address-card {
			background-color: white;
			border-radius: 8px;
			overflow: hidden;
			margin-bottom: 15px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			transition: transform 0.2s, box-shadow 0.2s;
			position: relative;

			&:active {
				transform: translateY(-2px);
				box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
			}
		}

		.address-content {
			padding: 15px;
			position: relative;
		}

		.address-default-tag {
			display: inline-block;
			font-size: 12px;
			color: var(--primary-color);
			border: 1px solid var(--primary-color);
			padding: 2px 6px;
			border-radius: 4px;
			margin-bottom: 8px;
		}

		.address-name-phone {
			font-size: 15px;
			font-weight: bold;
			margin-bottom: 8px;
		}

		.address-detail {
			font-size: 14px;
			color: #666;
			line-height: 1.4;
			margin-bottom: 5px;
		}

		.address-actions {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 10px;
		}

		.address-action {
			display: flex;
			align-items: center;
			font-size: 13px;
			color: #666;
			margin-left: 15px;

			text {
				margin-left: 5px;
			}
		}

		.address-add-btn {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			background-color: var(--primary-color);
			color: white;
			border: none;
			border-radius: 25px;
			padding: 12px 25px;
			font-size: 15px;
			box-shadow: 0 4px 12px rgba(255, 106, 106, 0.3);
			display: flex;
			align-items: center;
			z-index: 10;

			text {
				margin-left: 8px;
			}
		}

		.address-popup {
			max-height: 80vh;

			.address-form {
				background-color: #fff;
				border-radius: 16px 16px 0 0;
				padding: 20px 15px;
				box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

				.form-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20px;

					.form-title {
						font-size: 18px;
						font-weight: bold;
						color: #333;
					}

					.close-icon {
						padding: 5px;
					}
				}

				.form-group {
					margin-bottom: 20px;

					.form-label {
						font-size: 14px;
						color: #666;
						margin-bottom: 8px;
						font-weight: 500;
					}

					.form-input {
						width: 100%;
						height: 44px;
						padding: 0 12px;
						border: 1px solid #eee;
						border-radius: 8px;
						font-size: 15px;
						background-color: #f9f9f9;
						transition: border-color 0.3s;

						&:focus {
							border-color: var(--primary-color);
							background-color: #fff;
						}
					}

					.region-input {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 44px;
						padding: 0 12px;
						border: 1px solid #eee;
						border-radius: 8px;
						background-color: #f9f9f9;
					}

					.placeholder {
						color: #bbb;
						font-size: 14px;
					}
				}

				.form-actions {
					display: flex;
					margin-top: 30px;

					.form-btn {
						height: 48px;
						border-radius: 24px;
						font-size: 16px;
						font-weight: 500;
						display: flex;
						align-items: center;
						justify-content: center;

						.btn-text {
							line-height: 1;
						}

						&-cancel {
							width: 150px;
							background-color: #f5f5f5;
							color: #666;
							margin-right: 15px;
						}

						&-save {
							width: 150px;
							background-color: var(--primary-color);
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>